<template>
	<div class="w1024-wrap">
		<div class="page">
			<div class="desc-wrap">
				<div class="operate-des" style="top:159px;text-align: left;">
					<p class="operate-title clear">
						<span class="left">操作按钮说明</span>
						<img class="retract right" v-if="showDes" @click="showDes=!showDes" style="margin-top: 3px;" src="http://xnhloc.xnhkfpt.com/qudao/static/channelthree/qwvedio/images/retract.svg">
						<img class="spread right" v-if="!showDes" @click="showDes=!showDes" style="margin-top: 3px; " src="http://xnhloc.xnhkfpt.com/qudao/static/channelthree/qwvedio/images/spread.svg">
					</p>

					<ul class="fixed-content" v-if="showDes">
						<li class="operate-item flex flex-align-center">
							<img src="../../../assets/images/hangupMessage/set.svg" />
							<p class="operate-text">设置</p>
						</li>
					</ul>
				</div>
			</div>
			<div class="head" style="margin-bottom: 10px;">
				<div class="group-info flex flex-align-center">
					<div>
						<span class="title">短信模板</span> 所在集团：{{group.circleoldname}}
					</div>
				</div>
				<div class="search-wrap">
					<div class="clear">
						<div class="form-item left">
							<el-radio-group @change="search" v-model="searchData.merchant" size="small">
							  <el-radio-button v-if="quantitylist.dxtotalnum" label="1">电信</el-radio-button>
							  <el-radio-button v-if="quantitylist.ydtotalnum" label="2">移动</el-radio-button>
							  <el-radio-button v-if="quantitylist.lttotalnum" label="3">联通</el-radio-button>
							</el-radio-group>
						</div>
						<div class="right">
							<div class="form-item left">
								<p class="form-item-title">模板名称：</p>
								<div class="form-item-content">
									<el-input clearable v-model="searchData.smstitle" placeholder="请输入短信名称"></el-input>
								</div>
							</div>
							<!--<div class="form-item left">
								<p class="form-item-title">短信类型：</p>
								<div class="form-item-content">
									<el-select clearable v-model="searchData.templatetype" placeholder="请选择">
										<el-option key="1" label="文字短信" :value="1"></el-option>
										<el-option key="2" label="视频短信" :value="2"></el-option>
									</el-select>
								</div>
							</div>-->
							<div class="form-item left">
								<p class="form-item-title">模板状态：</p>
								<div class="form-item-content">
									<el-select clearable v-model="searchData.templatestatus" placeholder="请选择">
										<el-option key="1" label="审核中" :value="1"></el-option>
										<el-option key="2" label="已通过" :value="2"></el-option>
										<el-option key="3" label="未通过" :value="3"></el-option>
										<el-option key="5" label="设置中" :value="5"></el-option>
									</el-select>
								</div>
							</div>
							<div class="form-item left">
								<el-button class="left" type="primary" @click="search">查询</el-button>
								<el-button class="left" type="primary" @click="addTemplate">添加模板</el-button>
							</div>
						</div>
					</div>
				</div>
			</div>
			<template v-if="list.length">
				<div class="table-wrap">
					<el-table ref="table" v-loading="loading" size="middle" :data="list" style="width: 100%">
						<el-table-column prop="smstitle" width="130" label="模板名称"></el-table-column>
						<!--<el-table-column label="短信类型" min-width="80">
							<template slot-scope="scope">
								<span>{{scope.row.templatetype==1?'文字短信':'视频短信'}}</span>
							</template>
						</el-table-column>-->
						<el-table-column width="210" label="短信内容">
							<template slot-scope="scope">
								<div class="flex" style="width: 100%;">
									<el-popover placement="top-start" width="240" trigger="hover">
										<div class="relative overflow-hidden">
											<p style="line-height: 24px;">{{scope.row.smstextcontent}}<el-button :data-clipboard-target="'#id'+scope.row.hanguptemplateid" v-clipboard size="mini" type="primary" style="margin-left:6px;">复制</el-button></p>
										</div>
										<template slot="reference">
											<p style="width: 190px;" class="text-overflow-hidden">{{scope.row.smstextcontent}}</p>
											<input style="position: absolute;left: 0;top: 0;opacity: 0;z-index: -1;" readonly="" v-model="scope.row.smstextcontent" :id="'id'+scope.row.hanguptemplateid" type="text" />
										</template>
									</el-popover>
								</div>
							</template>
						</el-table-column>
						<el-table-column label="资质" width="120">
							<template slot-scope="scope">
								<div v-if="scope.row.qualification" class="media-wrapper" style="margin: 0 auto;">
									<img @click="viewImage(scope.row.qualification)" :src="scope.row.qualification" alt="" />
								</div>
								<span v-else>--</span>
							</template>
						</el-table-column>
						<!--<el-table-column label="视频" width="90">
							<template slot-scope="scope">
								<div class="media-wrapper" v-if="scope.row.smsvideocontent">
									<video :src="scope.row.smsvideocontent"></video>
									<div class="cover">
										<i @click="playVideo(scope.row.smsvideocontent)" class="el-icon-video-play center"></i>
									</div>
								</div>
								<span v-else>--</span>
							</template>
						</el-table-column>-->
						<el-table-column label="状态" width="120">
							<template slot-scope="scope">
								<span v-if="scope.row.templatestatus==1">审核中</span>
								<span v-if="scope.row.templatestatus==2&&scope.row.setstatus==0">已通过</span>
								<span v-if="scope.row.templatestatus==2&&scope.row.setstatus==1">已通过(已设置)</span>
								<span v-if="scope.row.templatestatus==3">未通过{{scope.row.auditmemo?'('+scope.row.auditmemo+')':''}}</span>
								<span v-if="scope.row.templatestatus==5">设置中</span>
							</template>
						</el-table-column>
						<el-table-column label="备注" width="140">
							<template slot-scope="scope">
								<el-popover v-if="scope.row.auditmemo" placement="top-start" width="190" trigger="hover" :content="scope.row.auditmemo">
									<p slot="reference" class="text-overflow-hidden">{{scope.row.auditmemo}}</p>
								</el-popover>
								<span v-else>{{scope.row.auditmemo||'-'}}</span>
							</template>
						</el-table-column>
						<el-table-column prop="createtime" width="170" label="提交时间"></el-table-column>
						<el-table-column label="操作" min-width="50">
							<template slot-scope="scope">
								<el-popconfirm v-if="scope.row.deletestatus!=1&&scope.row.templatestatus==2&&!scope.row.setstatus==1" confirm-button-text='确定' cancel-button-text='取消' icon="el-icon-info" icon-color="orange" @confirm="confirmSet(scope.row.hanguptemplateid)" title="你确定要将当前模板设置为成员短信模板吗？">
									<img slot="reference" title="设置" src="../../../assets/images/hangupMessage/set.svg"/>
								</el-popconfirm>
							</template>
						</el-table-column>
					</el-table>
				</div>
				<el-pagination :current-page="this.searchData.pagenow" class="text-center" layout="prev, pager, next,sizes" prev-text="上一页" next-text="下一页" @size-change="pageSizeChange" @current-change="currentPageChange" :total="totalCount">
				</el-pagination>
			</template>
			<no-data v-if="!loading&&!list.length" text="暂无短信模板"></no-data>
			<div class="btn-wrap flex flex-align-center flex-justify-center">
				<el-button @click="back" size="medium" type="primary">返回</el-button>
			</div>
		</div>
		<el-dialog title="添加模板" :visible.sync="addTemplateVisible" width="760px" center>
			<!--<message-editor v-if="addTemplateVisible" :groupname="group.circlename" :linkphone="group.linkphone" :merchant="message.type" ref="messageEditor" scene="addMessage" :type="templateType" :circlecommonuid="group.circlecommonuid" v-bind="message" @change="templateChange" @messageTypeChange="messageTypeChange"></message-editor>-->
			<div class="dialog-content">
				<div class="types clear">
					<p class="type-item" @click="message.type=4" :class="message.type==4?'selected-type':''">全部</p>
					<p class="type-item" @click="message.type=1" :class="message.type==1?'selected-type':''">电信</p>
					<p class="type-item" @click="message.type=2" :class="message.type==2?'selected-type':''">移动</p>
					<p class="type-item" @click="message.type=3" :class="message.type==3?'selected-type':''">联通</p>
				</div>
				<template v-if="message.type==3||message.type==4">
					<div class="template-box" @click="selectTemplate(0)" :class="templateIndex==0?'selected-template':''">
						<div class="template-item clear">
							<p class="template-item-title">短信内容：</p>
							<div class="template-item-content flex">
								{{templateList[0].smstextcontent}}
								<el-input type="textarea" rows="3" resize="none" ref="extraText" v-on:input.native="extraInput" @blur="message.smstextcontent=templateList[0].smstextcontent+extraText" size="mini" style="width: 400px;font-size: 14px;" v-model="extraText"></el-input><span class="length-tip"><i style="font-style: normal;" :class="extraText.length>extraTextLength?'pink':''">{{extraText.length}}</i>/{{extraTextLength}}</span>
							</div>
						</div>
					</div>
				</template>
				
				<template v-else>
					<div class="template-box" @click="selectTemplate(index)" :class="templateIndex==index?'selected-template':''" v-for="(item,index) in templateList">
						<div class="template-item clear">
							<p class="template-item-title">短信内容：</p>
							<div class="template-item-content flex">
								<textarea @blur="message.smstextcontent=item.smstextcontent" @input="smsInput(index)" class="content-textarea" v-model="item.smstextcontent"></textarea>
								<p><span class="length-tip"><i style="font-style: normal;" :class="item.smstextcontent.length>68?'pink':''">{{item.smstextcontent.length}}</i>/68</span></p>
							</div>
						</div>
					</div>
				</template>
				<p class="message-tip">（短信内容最长不能超过68个汉字，含标点符号）</p>
				<div class="clear" style="margin-top: 4px;">
					<div class="form-item">
						<p class="form-item-title text-left">上传资质：</p>
						<div class="form-item-content clear" style="width:auto;">
							<image-uploader ref="qualification" :imageUrl="message.qualification" @success="(img)=>{imageUploadSuccess(img)}" :fileSizeLimit="500" class="upload-wrapper">
								<div class="upload-bg" v-if="!message.qualification">
									<p class="img-tip">请上传</p>
								</div>
								<template v-if="message.qualification">
									<div class="operate-wrap flex flex-align-center flex-justify-arround">
										<img :src="change" @click="changeFile" />
										<img :src="del" @click="delFile" />
									</div>
								</template>
							</image-uploader>
						</div>
					</div>
				</div>
			</div>
			
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" plain @click="addTemplateVisible=false">取 消</el-button>
			    <el-button type="primary" @click="confirmAddTemplate">确 定</el-button>
			</span>
		</el-dialog>
		<view-img :src="imgSrc" v-if="showImg" @close="closeImg"></view-img>
	</div>

</template>

<script>
	import {deepClone} from '@/utils/common'
	import NoData from '@/components/NoData'
	import MessageEditor from '@/components/MessageEditor.vue'
	import ImageUploader from '@/components/ImageUploader'
	import clipboard from "@/directive/clipboard/clipboard.js";
	import change from '@/assets/images/change.png'
	import del from '@/assets/images/del.png'
	export default {
		name: 'SMSTemplate',
		components: {
			NoData,
			MessageEditor,
			ImageUploader,
		},
		directives: {
			clipboard: clipboard
		},
		data() {
			return {
				change,
				del,
				
				showDes:true,
				network: false,
				loading: false,
				totalCount: 0,
				group: {},
				quantitylist: {},
				searchData: {
					pagenow:1,
					shownum:10,
					merchant:this.$route.params.merchant||1,
					circlecommonuid:this.$route.params.circlecommonuid,
					smstitle:'',
					templatetype:'',
					templatestatus:'',
				},
				phoneAndFeeInfo:{},
				list: [],
				addTemplateVisible: false,
				message:{
					smstextcontent: '',
					smsvideocontent: '',
					smsvideoimg: '',
					type:4,
					qualification:'',
				},
				extraText:'',
				templateIndex:0,
				templateList: [{smstextcontent:''}],
				defaultTemplateList: [{
					smstextcontent: '{集团名称}感谢您的致电！'
				},{
					smstextcontent: '感谢您致电{集团名称}，我们秉承顾客至上、用心服务的宗旨。竭诚为您提供优质贴心的服务！'
				},{
					smstextcontent: '感谢您的接听, {集团名称}竭诚为您服务，如有疑问请联系我们，联系电话{联系电话}'
				},{
					smstextcontent: '{集团名称}，感谢您的致电！顾客至上用心服务是我们的宗旨。竭诚为您提供优质贴心的服务！'
				}],
				templateType:1,
			}
		},
		mounted() {
			this.getGroupInfo()
			this.getMemberData()
			
		},
		watch:{
			'message.type'(){
				this.templateList=deepClone(this.defaultTemplateList)
				this.extraText=''
				this.selectTemplate(0)
			}
		},
		computed: {
			extraTextLength(){
			 	return 68-this.templateList[0].smstextcontent.length
			},
		},
		methods: {
			extraInput(){
				if(this.extraText.length>this.extraTextLength){
					this.msgError('长度超出限制')
				}
			},
			smsInput(index){
				console.log(this.templateList[index].smstextcontent)
				if(this.templateList[index].smstextcontent.length>68){
					this.msgError('长度超出限制')
				}
			},
			getGroupInfo() {
				this.$request.queryGroupDetail({circlecommonuid:this.searchData.circlecommonuid})
				.then(res=>{
					if(res.code==0){
						this.group=res.circledetail[0]?res.circledetail[0]:{}
						this.defaultTemplateList.forEach((item)=>{
							item.smstextcontent=item.smstextcontent.replace('{集团名称}',this.group.circlename).replace('{联系电话}',this.group.linkphone)
						})
						this.templateList.forEach((item)=>{
							item.smstextcontent=item.smstextcontent.replace('{集团名称}',this.group.circlename).replace('{联系电话}',this.group.linkphone)
						})
					}else{
						this.msgError(res.msg)
					}
				})
			},
			getMemberData(){
				this.$request.queryMemberList({
					shownum: 10,
					pagenow: 1,
					circlecommonuid: this.searchData.circlecommonuid,
					circletype: 1,
				}).then(res => {
						if(res.code == 0) {
							this.quantitylist = res.quantitylist&&res.quantitylist[0] ? res.quantitylist[0] : []
						} else {
							this.msgError(res.msg)
						}
						if(!this.$route.params.merchant){
							this.searchData.merchant=this.quantitylist.dxtotalnum?1:this.quantitylist.ydtotalnum?2:3
						}
						this.getData()
					})
			},
			pageSizeChange(pageSize) {
				this.searchData.shownum = pageSize
				this.getData()
			},
			currentPageChange(page) {
				this.searchData.pagenow = page
				this.getData()
			},
			search() {
				this.searchData.pagenow=1
				this.getData()
			},

			getData() {
				console.log(this.searchData)
				this.loading=true
				this.$request.queryTemplateList(this.searchData)
					.then(res => {
						if(res.code == 0) {
							this.list=res.templateList
							this.totalCount=res.page.totalresult
						} else {
							this.msgError(res.msg)
						}
						this.loading=false
					})
			},
			addTemplate() {
				this.message={
					smstextcontent: '',
					smsvideocontent: '',
					smsvideoimg: '',
					type:this.searchData.merchant,
					qualification:''
				}
				this.templateList=deepClone(this.defaultTemplateList)
				this.extraText=''
				this.selectTemplate(0)
				this.addTemplateVisible = true
			},

			selectTemplate(index){
				this.templateIndex=index
				this.message.smstextcontent=this.templateList[index].smstextcontent
			},
			imageUploadSuccess(img) {
				if(img.code == 0) {
					this.message.qualification = img.uploadpath
				}
			},
			changeFile(prop) {
				this.$refs.qualification.selectFile()
			},
			delFile(index) {
				this.message.qualification=''
			},
			confirmAddTemplate() {
				var message=deepClone(this.message)
//				if(this.$refs.messageEditor.obj.merchant==4){
//					message.smstextcontent=message.smstextcontent+this.$refs.messageEditor.extraText
//				}
//				if(this.$refs.messageEditor.obj.merchant==3&&this.$refs.messageEditor.templateId==1){
//					message.smstextcontent=message.smstextcontent+this.$refs.messageEditor.extraText
//				}
				if(!message.smstextcontent){
					this.msgError('请输入短信内容')
				}else if(message.smstextcontent.length > 68) {
					this.msgError('短信内容超过68个字符')
				} else if(this.templateType == 2 && !message.smsvideoimg && !message.smsvideocontent) {
					this.msgError('视频短信中的图片和视频请至少上传一项')
				} else{
					message.templatetype=this.templateType
					message.circlecommonuid=this.searchData.circlecommonuid
					console.log(message)
					this.$request.saveTemplate(message)
					.then(res=>{
						if(res.code==0){
							this.addTemplateVisible=false
							this.msgSuccess('添加成功')
							this.getData()
						}else{
							this.msgError(res.msg)
						}
					})
				}
			},
			confirmSet(templateId){
				this.$request.setTemplate({
					hanguptemplateid:templateId,
				}).then(res=>{
					if(res.code==0){
						this.addTemplateVisible=false
						this.msgSuccess('设置成功')
						this.getData()
					}else{
						this.msgError(res.msg)
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
.desc-wrap {
		position: fixed;
		width: 1024px;
		height: 0;
		top: 114px;
		left: 0;
		right: 0;
		margin: 0 auto;
		text-align: left;
	}
	
	.operate-des {
		position: absolute;
		right: -136px;
		top: 181px;
		padding: 0 16px 0 14px;
		color: #333;
		font-size: 12px;
		background: #EEF6FA;
	}
	
	.operate-title {
		width: 95px;
		font-weight: bold;
		line-height: 16px;
		padding-top: 16px;
		padding-bottom: 16px;
		font-size: 12px;
	}
	
	.operate-item {
		margin-bottom: 10px;
	}
	
	.operate-des .operate-icon {
		margin: 0;
	}
	
	.operate-text {
		margin-left: 10px;
	}
	.length-tip{
		margin-left: -4px;
		padding-left: 8px;
		font-size: 14px;
	}
	.page {
		.head {
			border-bottom: 10px solid #f5f5f5;
			padding: 0 20px;
			.group-info {
				height: 73px;
				border-bottom: 1px solid #f5f5f5;
				font-size: 14px;
				text-indent: 10px;
				.title {
					font-weight: bold;
					font-size: 18px;
					margin-right: 19px;
				}
			}
		}
		.search-wrap {
			padding: 24px 10px 8px;
			margin-bottom: 10px;
			>>>.el-radio-button--small .el-radio-button__inner{
				font-size: 14px;
			}
		}
		>>>.el-table {
			th {
				>.cell {
					text-align: center;
				}
			}
			td {
				>.cell {
					text-align: center;
					.text-btn{
						margin-left: 4px;
					}
					.flex{
						span{
							display: block;
							height: 22.4px;
							/*p{
								line-height: 28px;
							}*/
						}
						.text-btn{
							height: auto;
							line-height: inherit;
						}
					}
					.media-wrapper{
						width: 50px;
						height: 50px;
						position: relative;
						background: #f5f5f5;
						img,video{
							width: 100%;
							height: 100%;
							display: block;
						}
						.cover{
							position: absolute;
							width: 100%;
							height: 100%;
							left: 0;
							top: 0;
							
							.el-icon-video-play{
								width: 30px;
								height: 30px;
								font-size: 30px;
								color: #fff;
							}
						}
					}
					
				}
			}
		}
	}
	.btn{
		width: 30px;
		height: 24px;
		cursor: pointer;
	}
	>>>.el-dialog__body {
		padding: 16px 16px 24px;
		.dialog-content {
			border-top: 1px solid #eee;
			border-bottom: 1px solid #eee;
			min-height: 184px;
			padding: 12px 10px 0;
			.types{
				height: 36px;
				margin-bottom: 20px;
				.type-item{
					width: 40px;
					height: 36px;
					line-height: 36px;
					float: left;
					margin-right: 20px;
					text-align: center;
					color: #333;
					font-size: 14px;
					box-sizing: border-box;
					cursor: pointer;
				}
				.selected-type{
					color: #0088EA;
					border-bottom: 2px solid #0088EA;
				}
			}
			.template-box {
				width: 100%;
				padding: 4px 8px;
				border: 1px solid #EEEEEE;
				border-radius: 4px;
				margin-bottom: 12px;
				color: #333;
				cursor: pointer;
				&:last-child {
					margin-bottom: 0;
				}
				.template-item {
					line-height: 24px;
				}
				.template-item-title {
					width: 86px;
					text-align: right;
					padding-right: 4px;
					float: left;
					/*font-size: 16px;*/
				}
				.template-item-content {
					margin-left: 86px;
					/*font-size: 16px;*/
					>>>.el-input__inner{
						height: 24px;
						line-height: 24px;
						display: block;
						font-size: 14px;
					}
					.content-textarea{
						flex-grow: 1;
						height: 48px;
						line-height: 24px;
						resize: none;
						color: #333;
						font-size: 14px;
						padding: 0 8px;
					}
					.image-wrap {
						width: 100px;
						height: 100px;
						position: relative;
						background: #f5f5f5;
						margin-top: 4px;
						img,
						video {
							width: 100%;
							height: 100%;
							display: block;
						}
						.cover {
							position: absolute;
							width: 100%;
							height: 100%;
							left: 0;
							top: 0;
							.el-icon-video-play {
								width: 40px;
								height: 40px;
								color: #fff;
								font-size: 40px;
							}
						}
					}
				}
			}
			.selected-template {
				background: #0088EA;
				color: #fff;
				border-color: #0088EA;
				.template-item{
					color: #fff;
				}
				.content-textarea{
					color: #fff!important;
				}
			}
			.message-tip{
				font-size: 14px;
				color: red;
			}
			
			.upload-wrapper {
				width: 100px;
				height: 100px;
				margin-right: 20px;
				margin-top: 9px;
				float: left;
				background: #f5f5f5;
				position: relative;
				>img {
					width: 100%;
					height: 100%;
				}
				.upload-bg {
					width: 100%;
					height: 100%;
					background: url(../../../assets/images/upload-bg.png);
					.img-tip {
						color: #ccc;
						font-size: 14px;
						line-height: 20px;
						padding-top: 12px;
						text-align: center;
					}
					.required{
						font-size: 12px;
						color: red;
						margin-top: 30px;
					}
				}
				&:hover {
					.operate-wrap {
						display: flex;
					}
				}
				.operate-wrap {
					position: absolute;
					width: 100%;
					height: 24px;
					left: 0;
					bottom: 0;
					background: rgba(255, 0, 0, 0.8);
					opacity: 0.8;
					display: none;
					padding: 0 10px;
				}
				.operate-wrap .operate {
					width: 20px;
					height: 20px;
					cursor: pointer;
				}
			}
		}
	}
</style>